import React, { useEffect, useState } from "react";
import { getUserName } from "@/api/userName";
import { Table /* , Switch, Space */ } from "antd";
import { useSize } from "ahooks";
import usePagination from "@/hooks/usePagination";
export default function Home() {
  const [productList, setProductList] = useState([]);
  const getProductListDate = () => {
    getUserName().then((res) => {
      console.log(res.data.data);
      setProductList(res.data.data);
    });
  };

  //组件挂载时获取数据
  useEffect(() => {
    getProductListDate();
  }, []);

  //使用usePagination自定义分页
  const pagination = usePagination();

  //使用useSize获取body高度
  const size = useSize(document.querySelector("body"));

  const defaultHeight = document.body.offsetHeight;

  //表格列配置
  const columns = [
    {
      title: "序号",

      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: "名字",
      dataIndex: "name",
      key: "addressid",
    },
    {
      title: "手机号",
      key: "addressid",
      dataIndex: "tel",
    },
    {
      title: "省",

      dataIndex: "province",
      key: "addressid",
    },
    {
      title: "市",
      dataIndex: "city",
      key: "addressid",
    },
    {
      title: "县",
      dataIndex: "county",
      key: "addressid",
    },
  ];

  return (
    <div>
      <Table
        rowKey={(record) => record.proid}
        columns={columns}
        scroll={{ y: (size ? size.height : defaultHeight) - 310 }}
        dataSource={productList}
      />
    </div>
  );
}
